<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('时间')">
              <a-range-picker v-model:value="page.timeValue"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>

      <a-table style="margin-top: 20px" :columns="totalTableColumn" :pagination="false" :data-source="totalTableData" :scroll="{x:1000}"
               bordered></a-table>
    </template>
    <div style="text-align: right;margin-bottom: 20px">
      <a-alert message="本页面货币单位为美元！" style="float: left" type="warning" show-icon/>
      <a-button type="primary" @click="visible={isShow:true,type:'add',title:$t('新增')}">{{ $t('新增') }}</a-button>
    </div>
    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData" :scroll="{x:1000}">
      <template #operation="{record }">
        <a-button type="link" @click="editList(record)">{{ $t('编辑') }}</a-button>
      </template>
    </a-table>
    <a-modal v-model:visible="visible.isShow" :title="visible.title" @ok="confirmVisible" :afterClose="clearForm"
    >
      <a-form>
        <a-form-item :label="$t('流量费')">
          <a-input v-model:value="tableRows.flowFee"/>
        </a-form-item>
        <a-form-item :label="$t('运维费')">
          <a-input v-model:value="tableRows.maintainFee"/>
        </a-form-item>
        <a-form-item :label="$t('支付费')">
          <a-input v-model:value="tableRows.payFee"/>
        </a-form-item>
        <a-form-item :label="$t('工资')">
          <a-input v-model:value="tableRows.salaryFee"/>
        </a-form-item>
        <a-form-item :label="$t('奖金')">
          <a-input v-model:value="tableRows.bonusFee"/>
        </a-form-item>
        <a-form-item :label="$t('其他')">
          <a-input v-model:value="tableRows.elseFee"/>
        </a-form-item>
      </a-form>
      <a-alert message="请按美元汇率换算后，输入到本页面" type="warning" show-icon/>
    </a-modal>
  </a-card>
</template>

<script>
import {reactive, ref, toRefs, onMounted, computed, createVNode} from 'vue'
import {getProfitList, updateProfit, addProfit, getProfitListTotal} from "@/api/finance"
import {selectSystemUser} from "../../../api";
import locale from '@/locale'

const {t} = locale.global;
import {hasPermission, dateFormatTimeStamp} from '@/utils'
import {message} from "ant-design-vue";

const tableColumn = [
  {title: t('时间'), dataIndex: 'time', width: 150, align: 'center', fixed: 'left',},
  {title: t('流量费'), dataIndex: 'flowFee', width: 150, align: 'center'},
  {title: t('运维费'), dataIndex: 'maintainFee', width: 150, align: 'center'},
  {title: t('支付费'), dataIndex: 'payFee', width: 150, align: 'center'},
  {title: t('工资'), dataIndex: 'salaryFee', width: 150, align: 'center'},
  {title: t('奖金'), dataIndex: 'bonusFee', width: 150, align: 'center'},
  {title: t('其他'), dataIndex: 'elseFee', width: 150, align: 'center'},
  {title: t('业务收入'), dataIndex: 'businessIncome', width: 150, align: 'center'},
  {title: t('纯利润'), dataIndex: 'profit', width: 150, align: 'center'},
  {title: t('操作'), width: 100, align: 'center', fixed: 'right', slots: {customRender: 'operation',}},
]
const totalTableColumn = [
  {title: t('流量费'), dataIndex: 'flowFeeTotal', width: 150, align: 'center'},
  {title: t('运维费'), dataIndex: 'maintainFeeTotal', width: 150, align: 'center'},
  {title: t('支付费'), dataIndex: 'payFeeTotal', width: 150, align: 'center'},
  {title: t('工资'), dataIndex: 'salaryFeeTotal', width: 150, align: 'center'},
  {title: t('奖金'), dataIndex: 'bonusFeeTotal', width: 150, align: 'center'},
  {title: t('其他'), dataIndex: 'elseFeeTotal', width: 150, align: 'center'},
  {title: t('业务收入'), dataIndex: 'businessIncomeTotal', width: 150, align: 'center'},
  {title: t('纯利润'), dataIndex: 'profitTotal', width: 150, align: 'center'},
]
export default {
  name: "NetProfit",
  setup() {
    const formRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableRows: {},
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      tableData: [],
      totalTableData: [],
      systemUserList: [],
      incomeDetailsTableData: [],
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total,
      onChange: (page) => {
        state.page.pageNum = page
        method.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        method.getTableData()
      }
    }))
    const method = {
      async getTableData() {
        const [dateTimeStart, dateTimeEnd] = dateFormatTimeStamp(state.page.timeValue || [])
        const params = {
          dateTimeStart, dateTimeEnd,
          ...state.page,
        }
        delete params.timeValue
        method.getTotal(params)
        const res = await getProfitList(params)
        if (res.code === 1) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      async getTotal(params) {
        const res = await getProfitListTotal(params)
        if (res.code === 1 && res.data) {
          state.totalTableData = [res.data]
        } else {
          state.totalTableData = []
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        method.getTableData()
      },
      editList(row) {
        state.visible = {
          isShow: true,
          title: t('编辑'),
          type: 'edit'
        }
        state.tableRows = {...row}
      },
      async confirmVisible() {
        const isAdd = state.visible.type === 'add'
        const params = {
          ...state.tableRows,
          "bonusFee": state.tableRows.bonusFee || 0,
          "businessIncome": state.tableRows.businessIncome || 0,
          "elseFee": state.tableRows.elseFee || 0,
          "flowFee": state.tableRows.flowFee || 0,
          "maintainFee": state.tableRows.maintainFee || 0,
          "payFee": state.tableRows.payFee || 0,
          "profit": state.tableRows.profit || 0,
          "salaryFee": state.tableRows.salaryFee || 0,
        }
        const api = (params) => isAdd ? addProfit(params) : updateProfit(params)
        const res = await api(params)
        if (res.code === 1) {
          message.success(t('操作成功'))
          state.visible = false
          method.getTableData()
        }
      },
      clearForm() {
        state.tableRows = {}
      }
    }
    onMounted(() => {
      method.getTableData()

    })
    return {
      totalTableColumn,
      tableColumn,
      formRef,
      pagination,
      ...method,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>

